<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.a {
				width: 0;
				height: 0;
				/* border-top:100px solid transparent;
				border-bottom:0;
				border-right: 40px solid skyblue;
				border-left:0; */
				/* 简写方式 */
				/* 保留右边框颜色，设置上边框宽度较大挤出图形，设置右边框宽度 */
				border-color: transparent red transparent transparent;
				border-style: solid;
				border-width: 100px 40px 0 0;
			}

			.price {
				width: 160px;
				height: 24px;
				line-height: 24px;
				text-align: center;
				border: 1px solid red;
				margin: 30px auto;
			}

			.left {
				position: relative;
				float: left;
				width: 90px;
				height: 100%;
				font-size: 16px;
				font-weight: 700;
				background-color: red;
				color: #fff;
			}

			.left i {
				position: absolute;
				top: 0;
				right: 0;
				width: 0;
				height: 0;
				border-color: transparent white transparent transparent;
				border-style: solid;
				border-width: 24px 8px 0 0;
			}

			.right {
				font-size: 14px;
				color: gray;
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<h1>1.文字围绕图片，只需要给左边图片添加浮动即可，不需要两边都添加浮动</h1>
		<h1>2.利用行内块的特性来布局页面底部选页操作</h1>
		<h1>3.css的三角强化，怎样做出不是等腰的三角形</h1>
		<h2>先把左侧和下边的边框改成0，然后上边框宽度调大挤下来改成透明，就可以实现不同三角形，实际开发中有多种可以实现</h2>
		<div class="a"></div>
		<div class="price">
			<span class="left">￥1650
				<i></i></span>
			<span class="right">￥6650</span>
		</div>
		<h3>通过案例，在实际开发中要学会合理的选择标签，需要大量练习</h3>
	</body>
</html>
